<!--
 * @Author: 码上talk|RC
 * @Date: 2021-08-04 11:46:41
 * @LastEditTime: 2021-10-19 11:37:23
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /ma-portal/subpackage/axq/pages/article/list.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
  <view class="article">
    <template v-if="articleList.length !== 0">
      <view class="banner" v-if="articleList[0].banner">
        <a-img-loader :src="articleList[0].banner"></a-img-loader>
      </view>
      <view class="cards">
        <media-card v-for="(m,i) in articleList" :key="i" :data="m"></media-card>
        <a-logo type="text"></a-logo>
      </view>
    </template>
    <a-empty
      v-if="articleList.length === 0"
      :src="'empty/order.png'|prefixOssUrl"
      :tips="['暂无相关媒体报道，请后续关注留意']"
    ></a-empty>
  </view>
</template>

<script>
import MediaCard from './@fragment/media-card'
import {
  model
} from '@/model';

const {
  AxqArticle
} = model.collection;
export default {
  components: {
    MediaCard
  },
  data () {
    return {
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      total: 0,
      articleList: []
    }
  },
  onLoad () {
    this.getArticleList()
  },
  onReachBottom () {
    if (this.total > (this.params.pageIndex * this.params.pageSize)) {
      this.params.pageIndex++;
      this.getArticleList()
    }
  },
  methods: {
    getArticleList () {
      AxqArticle.sendApi('articlePage', {
        params: this.params,
        data: {}
      }).then(res => {
        const {
          status,
          data,
          page
        } = res;
        if (status) {
          this.total = page.total;
          this.articleList = this.articleList.concat(data);
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.article {
  padding-top: 20rpx;
  min-height: 100vh;
  background: @background-color-base;

  .banner {
    width: 690rpx;
    height: 240rpx;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .cards {
    margin: 30rpx 30rpx 0 30rpx;
  }
}
</style>